// http://localhost:3000/Nebula
import React, { useEffect } from 'react';
import { Route, Switch, useRouteMatch } from 'react-router-dom';
import Page from '../../components/Page';
import PageHeader from '../../components/PageHeader';
import Bank from '../Bank';
import BankCards from './BankCards';
import BankCards1 from './BankCards1';
import BankCards2 from './BankCards2';
import BankCards3 from './BankCards3';
import { useWallet } from 'use-wallet';
import Button from '../../components/Button';
import styled from 'styled-components';

import banner_nebula from '../../assets/image/banner_nebula.png';
import h5banner_nebula from '../../assets/image/h5banner_nebula.png';
import config from '../../config';
import LaunchCountdown from '../../components/Dial';
import shangsuo from '../../assets/image/img_shangsuo@2x.png';
import useBanks from '../../hooks/useBanks';
import useBasisCash from '../../hooks/useBasisCash';

import StarHeader from "../../components/Star/StarHeader";
import StarLock from "../../components/Star/StarLock";
import {planeConfigs} from "../../components/Star/StarHeader";
import useLiquidityOracle from '../../hooks/useLiquidityOracle';
import useLiquidityOracleTVLine from '../../hooks/useLiquidityOracleTVLine';
import {useLocation} from 'react-router-dom';
import kai from '../../assets/image/kai.png';
import guan from '../../assets/image/guan.png';

export const openGroup=['cash', 'ht', 'neo', 'filda', 'nuls'];
export const lpGroup = ['filda', 'nuls', 'can', 'flm', 'mdx'];//, 'nuls', 'can', 'flm'];
const Banks: React.FC = () => {
  const { path } = useRouteMatch();
  const { account, connect } = useWallet();
  const [stakedOnly,setStakedOnly] = React.useState(false);
  const [active,setActive] = React.useState(true);
  const activeDisplay = active && config.plane[config.group].bankEndAt && Date.now() > config.plane[config.group].bankEndAt.getTime() ? 'none' : 'block';

  const [banks] = useBanks();
  const basisCash = useBasisCash();
  const activeBanks = banks.filter((bank) => !bank.finished  );

  let titHd = (localStorage.getItem('titHd') == null)? 2 : parseInt(localStorage.getItem('titHd'));
  const [childrenMsg,setChildrenMsg] = React.useState(0);
  const [childrenMsg1,setChildrenMsg1] = React.useState(0);
  const [childrenMsg2,setChildrenMsg2] = React.useState(0);
  const [childrenMsg3,setChildrenMsg3] = React.useState(0);
  const { pathname } = useLocation();
  useEffect(() => {
    setChildrenMsg(0);
                    setChildrenMsg1(0);
                    setChildrenMsg2(0);
                    setChildrenMsg3(0);
  }, [pathname]);
  //setChildrenMsg(0);
  //setChildrenMsg1(0);
  //setChildrenMsg2(0);

  const [group,setGroup] = React.useState(planeConfigs[titHd].group);
  const liquidityOracle = useLiquidityOracle();
  //console.log('liquidityOracle', liquidityOracle);

  //console.log('group', group,localStorage.getItem('titHd'));
  config.group= group;
  const enable = useLiquidityOracleTVLine(config.group);
//   const functionqwe =  (): String => {
//     var b = parseInt().toString();
//     var len = b.length;
//     if (len <= 3) { return b; }
//     var r = len % 3;
//     return r > 0 ? b.slice(0, r) + "," + b.slice(r, len).match(/\d{3}/g).join(",") : b.slice(r, len).match(/\d{3}/g).join(",");
// }

  return (
    <Switch>
      <Page>
        <Route exact path={path}>
          {/* <PageHeader
            icon={<img
            src={banner_nebula}
            alt='logo'
            width={1920}
          />}
            title=""
            subtitle=""
          /> */}
          <StyleDiv1>
        <img
          src={banner_nebula}
          alt='logo'
          style={{width: '100%', height: 'auto'}}
        />

      </StyleDiv1>
      <StyleDiv2>
        <img
          src={h5banner_nebula}
          alt='logo'
          style={{width: '100%', height: 'auto'}}
        />
      </StyleDiv2>
          {!!account ? (
            <Center2>
              <StarHeader
                  selected={titHd}
                  onItemChange={(item,index)=>{
                    // console.log('item', item,index)
                    localStorage.setItem('titHd', index+'');
                    config.group= item.group;
                    setChildrenMsg(0);
                    setChildrenMsg1(0);
                    setChildrenMsg2(0);
                    setChildrenMsg3(0);
                    setGroup(item.group)
                  }}
              ></StarHeader>
              {
                (childrenMsg|| childrenMsg1 || childrenMsg2 || childrenMsg3)
                ?
                <Center3>
                  <StyledCardWrapper>
                    <StyledCardSuperAccent />
                    <StyledCard>
                      {
                        <React.Fragment>
                          <StyleTVL>锁仓总量</StyleTVL>
                          <StyleTVLValue>{'$' + (childrenMsg+childrenMsg1+childrenMsg2+childrenMsg3).toLocaleString()}</StyleTVLValue>
                        </React.Fragment>
                      }
                    </StyledCard>
                  </StyledCardWrapper>
                </Center3>
                :
                <></>
              }
              {
                lpGroup.includes(group) || !config.plane[config.group].bankStartAt || config.plane[config.group].bankStartAt && Date.now() < config.plane[config.group].bankStartAt.getTime()
                ?
                <Center3>
                  <StarLock baseNum={Number(liquidityOracle)} enable={enable} startTime={config.plane[config.group].bankStartAt ? config.plane[config.group].bankStartAt.getTime() : 0}></StarLock>
                </Center3>
                :
                <></>
              }

              <div style={{display: 'flex', flexDirection: 'row'}}>
                {
                  stakedOnly ?
                  <div style={{display: 'flex',flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}
                  onClick={() => setStakedOnly(false)}>
                    <span style={{lineHeight: '40px', color: '#fff', marginRight: '6px'}}>
                      Staked only
                    </span>
                    <img
                      src={kai}
                      style={{width: '60px', height: 'auto'}}
                    />
                  </div>
                  :
                  <div style={{display: 'flex',flexDirection: 'row', justifyContent: 'center', alignItems: 'center', minHeight: '40px'}}
                  onClick={() => setStakedOnly(true)}>
                    <span style={{lineHeight: '40px', color: '#fff', marginRight: '6px'}}>
                    Staked only
                    </span>
                    <img
                      src={guan}
                      style={{width: '60px', height: 'auto'}}
                    />
                  </div>
                }
                <StyleRight>
                {
                  active ? <><StyleTabLeftOn>Active</StyleTabLeftOn><StyleTabRightOff onClick={() => setActive(false)}>Inactive</StyleTabRightOff></>
                  :
                  <><StyleTabLeftOff onClick={() => setActive(true)}>Active</StyleTabLeftOff><StyleTabRightOn>Inactive</StyleTabRightOn></>
                }
                </StyleRight>

              </div>

              {openGroup.includes(group) && config.plane[config.group].bankStartAt && Date.now() > config.plane[config.group].bankStartAt.getTime()
                ?
                <React.Fragment>
                  <BankCards counts={childrenMsg} setCount={(n:number)=>setChildrenMsg(childrenMsg+n)} stakedOnly={stakedOnly} />
                  <div style={{display: `${activeDisplay}`}}>
                      <BankCards1 counts={childrenMsg1} setCount={(n:number)=>setChildrenMsg1(childrenMsg1+n)} stakedOnly={stakedOnly} />
                  {config.group == 'neo' || config.group == 'nuls' ? <></> :
                  (<BankCards2 counts={childrenMsg2} setCount={(n:number)=>setChildrenMsg2(childrenMsg2+n)} stakedOnly={stakedOnly} />)}
                  </div>

                </React.Fragment>
                :
                <></>
              }
              {lpGroup.includes(group)
                ?
                <div style={{display: `${activeDisplay}`}}>
                <BankCards3 counts={childrenMsg3} setCount={(n:number)=>setChildrenMsg3(childrenMsg3+n)} stakedOnly={stakedOnly} />
                </div>
                :
                <></>
              }
            </Center2>
          ) : (
            <Center>
              <Button onClick={() => connect('injected')} text="连接钱包" />
            </Center>
          )}
        </Route>
        <Route path={`${path}/:bankId`}>
          <Bank />
        </Route>
      </Page>
    </Switch>
  );
};

const StyleRight = styled.div`
  display: flex;
  flex-direction: row;
  margin-left: auto;
  margin-right: 4px;
  margin-top: 4px;
`

const StyleTabLeftOn = styled.div`
  display: flex;
  color: #ffffff;
  lineHeight: 40px;
  align-items: center;
  background-color: #fa4e32;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  height: 40px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  outline: none;
  padding-left: 0px;
  padding-right: 0px;
  pointer-events: none;
  margin-top: 5px;
  width: 100px;
`

const StyleTabLeftOff = styled.div`
  display: flex;
  color: #ffffff;
  lineHeight: 40px;
  align-items: center;
  border: 1px solid #fa4e32;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  height: 40px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  outline: none;
  padding-left: 0px;
  padding-right: 0px;
  margin-top: 5px;
  margin-right: -16px;
  width: 100px;
  box-sizing: border-box;
`

const StyleTabRightOn = styled.div`
  display: flex;
  color: #ffffff;
  lineHeight: 40px;
  align-items: center;
  background-color: #fa4e32;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  height: 40px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  outline: none;
  padding-left: 0px;
  padding-right: 0px;
  pointer-events: none;
  margin-top: 5px;
  width: 100px;
`

const StyleTabRightOff = styled.div`
  display: flex;
  color: #ffffff;
  lineHeight: 40px;
  align-items: center;
  border: 1px solid #fa4e32;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  height: 40px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  outline: none;
  padding-left: 0px;
  padding-right: 0px;
  margin-top: 5px;
  margin-left: -16px;
  width: 100px;
  box-sizing: border-box;
`

const StyleDiv1 = styled.div`
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  z-index: -1;
  @media (max-width: 768px) {
    display: none;
  }
`

const BivSc = styled.div`
  width: 100%;
  overflow-x: auto;
  display: flex;
  flex-direction: row;
`

const StyleDiv2 = styled.div`
  display: none;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  z-index: -1;
  margin-top: -70px;
  @media (max-width: 768px) {
    display: block;
  }
`

const Center = styled.div`
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding-bottom: 80px;
`;

const Center3 = styled.div`
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
`;

const Center2 = styled.div`
  @media (max-width: 768px) {
    width: 100%;
  }
`;

const StyledCardWrapper = styled.div`
  display: block;
  width: calc((900px - ${(props) => props.theme.spacing[4]}px * 2) / 3);
  position: relative;
  margin-top: 20px;
`;

const StyledCardSuperAccent = styled.div`
  background: #50d9b6;
  border-radius: 12px;
  filter: blur(8px);
  position: absolute;
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
  z-index: -1;
`;

const StyledCard = styled.div`
  background-color: rgba(0, 0, 0, 0.8);
  border: 1px solid #50d9b6;
  border-radius: 12px;
  box-shadow: inset 1px 1px 0px ${props => props.theme.color.grey[700]};
  display: block;
`;

const StyleTVL = styled.div`
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  margin-top:5px;
`;

const StyleTVLValue = styled.div`
  color: #50d9b6;
  text-align: center;
  font-size: 18px;
  margin-top:5px;
  margin-bottom:5px;
`;

export default Banks;
